<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DreStarting-照片墙</title>
    <!--    抽取公共头部-->
    <div th:replace="share/common :: head"></div>
    <link rel="stylesheet" href="../static/lib/picture/css/jkresponsivegallery.css" th:href="@{/lib/picture/css/jkresponsivegallery.css}">
</head>
<body>

<!--    抽取公共导航-->
<div th:replace="share/common :: menu(7)"></div>

<!--顶部图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="../static/images/picturebg.jpg" th:src="@{/images/photoBg.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
    <div class="m-bg-class_cover" >
        <div class="ui container" style="position: relative ;bottom: -540px;" id="waypoint">
            <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">照片墙</div>
            <div class="m-font-size-text-init-title m-margin-top" align="center">愿你走出半生，归来仍是少年</div>
        </div>
    </div>
</div>

&nbsp;&nbsp;&nbsp;
<!--照片墙-->
<div id="picture-main">
    <article class="thumb" th:each="picture:${pictures}">
        <div class="ma5-gallery">
            <div class="rthumbnail">
                <a href="../static/images/backimg1.jpg" th:href="@{${picture.img}}">
                    <img class="picture-zmki_px" th:src="@{${picture.img}}" src="../static/images/backimg1.jpg">
                </a>
                <div class="m-picture-text" th:text="${picture.picturename}">起风了</div>
                <div  class="rcaption">
                    <div style="font-size: large;" th:text="${picture.picturename}">起风了</div>
                    <div style="font-size: small" class="m-margin-top" th:text="${picture.create_time}">2020-02-02 &nbsp;深圳</div>
                    <p style="font-size: small" th:text="${picture.description}">我曾难自拔于世界之大，也沉迷于其中梦话</p>
                </div>
            </div>
        </div>
    </article>
</div>
<!--置顶图标-->
<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons ">
        <div class="ui center aligned basic segment" style="margin-bottom: 0">
            <button id="payButton" class="ui orange basic circular button">滴滴</button>
        </div>
        <a href="#" class="ui center aligned basic segment icon" style="margin-top: 0"><i class="ui medium orange chevron up icon"></i> </a>
    </div>
</div>
&nbsp;&nbsp;&nbsp;
<!--    抽取公共footer    -->
<div th:replace="share/common :: #footer"></div>


<!--    抽取公共js    -->
<div th:replace="share/common :: #js"></div>
<script src="../static/lib/picture/js/jquery.min.js" th:src="@{/lib/picture/js/jquery.min.js}"></script>
<script src="../static/lib/picture/js/jkresponsivegallery.js" th:src="@{/lib/picture/js/jkresponsivegallery.js}"></script>


<script>
    $(function() {
        $('.rthumbnail').responsivegallery();
    });

    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
</body>
</html>